<head>
	<%= javascript_include_tag "user/first_setting" %> 
  <%= stylesheet_link_tag 'user/first_setting' %>
</head>


<div class="localcarousel">
    <div class="localcarousel-inner">
        <input class="localcarousel-open" type="radio" id="localcarousel-1" name="localcarousel" aria-hidden="true" hidden="" checked="checked">
        <div class="localcarousel-item wpper">
            <div class="col-lg-11 col-md-11 col-xs-11" style="padding-top:-5px;">
              <h3>
                Step 1. Your Pivotal Tracker Token
                <p>Provide your account token on pivotal tracker so that we can track your projects.</p>
              </h3>
 

        <div id="container" style="top:100%;left:20%;width:50%">
            <div class="list-view">
              <ul>
                  <li>
                    <div class="form-group">
                      <div class="col-lg-1 col-md-1 col-xs-1">
                      <span class="icon icon-pencil icon-2x" style="margin-top:7px;"></span>
                      </div>
                      <div class="col-lg-10 col-md-10 col-xs-10">
                       <%= text_field_tag 'ptracker_token', nil, options = {:class=>'form-control ',:placeholder => "Enter your pivotal tracker account token here"} %>
                      </div>
                    </div>
                   </li>

                   <li>

                    <div class="form-group">
                      <div class="col-lg-1 col-md-1 col-xs-1">
                      <span class="icon icon-envelope icon-2x" style="margin-top: 7px;">
                      </span>
                      </div>
                      <div class="col-lg-10 col-md-10 col-xs-10">
                     <%= text_field_tag 'github_token', nil, options = {:class=>'form-control ', :placeholder => "Enter your github access token"} %>
                      </div>
                    </div>
                   </li>


               </ul>
           </div>
       </div>

                               

    </div>

    <div class="col-lg-1 col-md-1 col-xs-1" style="padding-top:-5px;">

      <div class="center">
       <span class="qs">? <span class="popover2 above"> You can find your token at the bottom of the "Profile" page on Pivotal Tracker</span></span>
       <span class="qs" style="margin-top:40px;">? <span class="popover2 above"> 
        You should set up an access token on Github so that we can access your private repository.</span></span>
        </div>
      </div>
        </div>
        <input class="localcarousel-open" type="radio" id="localcarousel-2" name="localcarousel" aria-hidden="true" hidden="">
        <div class="localcarousel-item wpper">
            <div class="col-lg-12 col-md-12 col-xs-12" style="padding-top:-5px;">
                <h3>
                    Step 2. Select projects
                    <p id="step2_message">We are trying to retreive your data on Pivotal Tracker.</p>
                </h3>
                <!-- <div class='content' id="loading">
                  <h1 class='loading'></h1>
                </div> -->
                <section class="loaders loaders-bg-3" id="loading"><p>it could take minutes to load your profile.</p><span class="loader loader-double"></span> Loading...
                    </section>
                    <div id="container" style="top:100%;left:20%;height:280px;">
                      <div class="list-view">
                        <ul>
                          <div id="info_id" class="info">
                          </div>
                        </ul>
                      </div>
                    </div>
            </div>
        </div>
        <input class="localcarousel-open" type="radio" id="localcarousel-3" name="localcarousel" aria-hidden="true" hidden="">
        <div class="localcarousel-item wpper">
            <div class="col-lg-12 col-md-12 col-xs-12" style="padding-top:-5px;">
                <h3>
                    Step 3.Get Started
                    <p id="step3_message">We are trying to analyze data from Pivotal Tracker & Github.</p>

                </h3>
                  <section class="loaders loaders-bg-3" id="loading2"><p>it could take minutes to analyze the selected projects.</p><span class="loader loader-double"></span> Loading...
                  </section>
                  <div id="click_to_start" style="display:none;">
                    <div style="width:100%;margin-top:130px;text-align:center;">
                  <a class="pre" href="/user/index">
                   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve" width="60" height="60">

                    <rect fill="#FBBA44" width="30" height="30">
                      <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.7s" values="0,0;15,0;15,15;0,15;0,0;" repeatCount="indefinite"/>
                    </rect> 

                    <rect x="30" fill="#E84150" width="30" height="30">
                      <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.7s" values="0,0;0,15;-15,15;-15,0;0,0;" repeatCount="indefinite"/>
                    </rect> 
      
                    <rect x="30" y="30" fill="#62B87B" width="30" height="30">
                      <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.7s" values="0,0;-15,0;-15,-15;0,-15;0,0;" repeatCount="indefinite"/>
                    </rect> 

                    <rect y="30" fill="#2F6FB6" width="30" height="30">
                      <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.7s" values="0,0;0,-15;15,-15;15,0;0,0;" repeatCount="indefinite"/>
                    </rect>
                   </svg>
                  </a>

                  <a href="/user/index" style="position:static;margin-left:130px;"><h4 class="shimmer ">Click to start</h4></a>
                    </div>
                  </div>


            </div>
        </div>
        
        <label id="1to2" for="localcarousel-2" class="localcarousel-control next control-1" onclick="return getProjects();">›</label>
        <label id="2to1" for="localcarousel-1" class="localcarousel-control prev control-2">‹</label>
        <label id="2to3" for="localcarousel-3" class="localcarousel-control next control-2" onclick="return sendSelectedProjects();">›</label>
        <label for="localcarousel-2" class="localcarousel-control prev control-3">‹</label>
        <ol class="localcarousel-indicators">
            <li>
                <!-- <label for="localcarousel-1" class="localcarousel-bullet">•</label> -->
                <label class="localcarousel-bullet">•</label>
            </li>
            <li>
                <!-- <label for="localcarousel-2" class="localcarousel-bullet">•</label> -->
                <label class="localcarousel-bullet">•</label>
            </li>
            <li>
                <label class="localcarousel-bullet">•</label>
                <!-- <label for="localcarousel-3" class="localcarousel-bullet">•</label> -->
            </li>
        </ol>
    </div>
</div>



<script type="text/javascript">


// var timer, init, start, $loading;
// $loading = $(".loading");
// start = function() {
//     var cnt = 0;
//     clearInterval(timer);
//     timer = setInterval(function() {
//         if (cnt === 0) {
//             $loading.removeClass("step4").addClass("step1");
//         } else if (cnt === 1) {
//             $loading.removeClass("step1").addClass("step2");
//         } else if (cnt === 2) {
//             $loading.removeClass("step2").addClass("step3");
//         } else if (cnt === 3) {
//             $loading.removeClass("step3").addClass("step4");
//             cnt = -1;
//         }
//         cnt++;
//     }, 1000);
// }
// init = function() {
//     $loading.text("Loading");
//     start();
// }
// init();
</script>